<template>
  <div>
    <a-layout>
      <a-layout-header :style="headerStyle">
        <div style="padding-left: 100px">
          <router-link to="/">
            <!-- <a-image
              :width="200"
              :preview="false"
              src="https://pic.imgdb.cn/item/65564497c458853aeffcd358.png"
            /> -->
            <a-image :width="200" :preview="false" :src="headerLogo" />
          </router-link>
          <a-image style="padding-left: 20px; padding-top: 10px" :width="120" :preview="false"
            src="https://pic.imgdb.cn/item/6556d3cec458853aefecaa32.png" />
        </div>
      </a-layout-header>
      <a-layout-content :style="contentStyle">
        <div class="content">
          <div class="content_box">
            <div class="box_top">
              <div class="box">
                <!-- 顶部提示语 -->
                <div style="height: 28px; opacity: 0.6">
                  <a-space :size="5">
                    <ExclamationCircleOutlined style="color: #ff860d; padding-left: 10px" />
                    <p style="font-size: 11px; color: #ff860d; padding-top: 8px">
                      曲师商城不会以任何理由要求您转账，谨防诈骗
                    </p>
                  </a-space>
                </div>
                <!-- Form表单 -->
                <div class="navgation_top">
                  <a-tabs tabBarStyle="color: black" v-model:activeKey="activeKey">
                    <!-- 密码登录 -->
                    <a-tab-pane key="1" tab="密码登录">
                      <div>
                        <a-form ref="AccountFormRef" :rules="AccountRules" :model="user">
                          <a-form-item name="nickName">
                            <a-input placeholder="昵称" style="width: 100%" v-model:value="user.nickName" maxlength="10"
                              minlength="2">
                              <template #prefix>
                                <UserOutlined />
                              </template>
                            </a-input>
                          </a-form-item>
                          <a-form-item name="password">
                            <a-input-password placeholder="密码" style="width: 100%" v-model:value="user.password">
                              <template #prefix>
                                <LockOutlined />
                              </template>
                            </a-input-password>
                          </a-form-item>
                          <a-form-item>
                            <a-button style="
                                width: 100%;
                                background-color: #f56c6c;
                                color: white;
                                letter-spacing: 3px;
                                font-weight: bold;
                              " @click="doLogin" :disabled="isLogin">登录</a-button>
                          </a-form-item>
                        </a-form>
                      </div>
                    </a-tab-pane>
                    <!-- 手机登录 -->
                    <a-tab-pane key="2" tab="手机登录" force-render>
                      <div>
                        <a-form ref="PhoneFormRef" :rules="PhoneRules" :model="phoneUser">
                          <a-form-item name="phone">
                            <a-input addon-before="+86" style="width: 100%" v-model:value="phoneUser.phone"
                              maxlength="11" minlength="11">
                            </a-input>
                          </a-form-item>
                          <a-form-item name="code">
                            <a-input-search v-model:value="phoneUser.code" placeholder="请输入验证码" @search="onSearch" style="width: 100%" maxlength="6" minlength="6">
                              <template #enterButton>
                                <a-button @click="getCode" :disabled="disabled" style="
                                    background-color: #409eff;
                                    color: #fff;
                                    font-size: 10px;
                                  ">{{ content }}</a-button>
                              </template>
                            </a-input-search>
                          </a-form-item>
                          <a-form-item>
                            <a-button style="
                                width: 100%;
                                background-color: #f56c6c;
                                color: white;
                                letter-spacing: 3px;
                                font-weight: bold;
                              " @click="doPhoneLogin">登录</a-button>
                          </a-form-item>
                        </a-form>
                      </div>
                    </a-tab-pane>
                  </a-tabs>
                </div>
                <!-- 微信或者qq登录 -->
                <!-- <div class="bottom_login">
                  <a-row>
                    <a-col
                      :span="12"
                      style="
                        height: 50.8px;
                        display: flex;
                        justify-content: center;
                      "
                    >
                      <a-space :size="20">
                        <div>
                          <QqOutlined :style="QQStyle" />
                          <router-link @click="toDoLogin" to="" style="font-size: 12px"
                            >QQ</router-link
                          >
                        </div>
                        <div>
                          <WechatOutlined :style="WeiXinStyle" />
                          <router-link @click="toDoLogin" to="" style="font-size: 11px">
                            微信
                          </router-link>
                        </div>
                      </a-space>
                    </a-col>
                    <a-col
                      :span="12"
                      style="
                        height: 50.8px;
                        display: flex;
                        justify-content: center;
                        margin-top: 10px;
                      "
                    >
                      <router-link
                        to="/register"
                        style="
                          font-size: 11px;
                          margin-top: 10px;
                          padding-left: 40px;
                        "
                        >立即注册</router-link
                      >
                    </a-col>
                  </a-row>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </a-layout-content>
      <a-layout-footer :style="footerStyle">
        <span style="font-style: italic; font-size: 11px; color: rgb(234, 83, 83)">
          Copyright © 2023 @literature 版权所有
        </span>
      </a-layout-footer>
    </a-layout>
  </div>
</template>
<script setup>
import {
  QqOutlined,
  WechatOutlined,
  UserOutlined,
  LockOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { ref } from "vue";
import { passwordLogin, phoneLogin } from "@/api/user.js";
import router from "@/router";
import { useUserStore } from "@/stores/user";
import { useAuthorizationStore } from "@/stores/authorization";
import { sendMs } from "@/api/sendMs";
import { logo } from "@/stores/logo.js";

const headerLogo = ref("");
headerLogo.value = logo;

const activeKey = ref("1");
const user = ref({
  nickName: "",
  password: "",
});
const phoneUser = ref({
  phone: "",
  code: "",
});
const isLogin = ref(false);
//密码登录
const userStore = useUserStore();
const authorizationStore = useAuthorizationStore();
function doLogin() {
  AccountFormRef.value
    .validate()
    .then(() => {
      passwordLogin(user.value).then((res) => {
        if (res.code == 200 && res.data != null) {
          message.success("登录成功！");
          isLogin.value = true;
          userStore.setUser(res.data.user);
          authorizationStore.setAuthorization(res.data.authorization);
          router.push("/");
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
}

//手机号登录
function doPhoneLogin() {
  PhoneFormRef.value
    .validate()
    .then(() => {
      phoneLogin(phoneUser.value).then((res) => {
        if (res.code == 200 && res.data != null) {
          message.success("登录成功！");
          isLogin.value = true;
          userStore.setUser(res.data.user);
          authorizationStore.setAuthorization(res.data.authorization);
          router.push("/");
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
}

//数据校验
const PhoneFormRef = ref();
const AccountFormRef = ref();
const AccountRules = {
  nickName: [
    {
      required: true,
      message: "请输入昵称",
      trigger: "change",
    },
    {
      min: 2,
      max: 10,
      message: "长度为2~10个字符",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
};
const PhoneRules = {
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "change",
    },
    {
      min: 11,
      max: 11,
      message: "长度为11个字符",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
};

//获取验证码前确认是否是真实手机号
const disabled = ref(false);
const content = ref("获取验证码");
function getCode() {
  //请求发送短信
  if (phoneUser.value.phone !== "") {
    sendMs(phoneUser.value.phone).then((res) => {
      if (res.code === 200) {
        message.success("发送成功!");
      }
    });
    var time = 180;
    //禁用获取验证码按钮
    disabled.value = true;
    // 开启定时器
    var timer = setInterval(function () {
      // 判断剩余秒数
      if (time == 0) {
        // 清除定时器和复原按钮
        clearInterval(timer);
        disabled.value = false;
        content.value = "获取验证码";
      } else {
        content.value = `${time}秒后重新获取`;
        time--;
      }
    }, 1000);
  } else {
    message.error("请输入手机号");
  }
}

function toDoLogin() {
  message.success("暂未开放~")
}

//样式绑定
const headerStyle = {
  color: "#fff",
  height: "100px",
  backgroundColor: "#fff",
};
const contentStyle = {
  color: "#fff",
  width: "100%",
  height: "76vh",
};
const footerStyle = {
  textAlign: "center",
  color: "black",
  height: "10.5vh",
};

const QQStyle = {
  color: "#409EFF",
  fontSize: "20px",
};
const WeiXinStyle = {
  color: "#67C23A",
  fontSize: "20px",
};
</script>
<style scoped>
a:hover {
  color: red;
}

.content {
  width: 100%;
  background: url("https://pic.imgdb.cn/item/65746f89c458853aef812944.gif");
  height: 76vh;
}

.content_box {
  margin-left: 180px;
  margin-right: 180px;
  height: 76vh;
}

.box_top {
  /* padding-top: 100px;
  padding-bottom: 55px;
  padding-left: 0px; */
  display: flex;
  justify-content: flex-start;
  padding: 100px;
}

.box {
  width: 300px;
  /* height: 335px; */
  height: 300px;
  background-color: #fff;
  padding: 0 10px 0 10px;
  border-radius: 10px;
  opacity: 1;
}

.navgation_top {
  color: black;
  padding: 12px 16px;
  height: 258px;
}

.bottom_login {
  color: black;
  height: 50.8px;
  opacity: 0.7;
}
</style>